import React, { useEffect, useRef, useState } from 'react';
import { EdrmsStorageTypeStyled } from './style';
import * as echarts from 'echarts/core';
import { getStorgeTypeReportDtos } from '@/services/index'
import { StorageReportDto } from '@/services/types';
import { getFontSize } from '@/utils/tools/common';
import useEchartsResize from '@/utils/hooks/useEchartsResize';
import { useSelector } from 'react-redux';
type EdrmsStorageTypePorpsType = {

}

const EdrmsStorageType: React.FC<EdrmsStorageTypePorpsType> = () => {

    const [type, setType] = useState<Number>(0);
    const [title, setTitle] = useState<String>(`切换为月份展示`);
    const [reportData, setReportData] = useState<StorageReportDto>({});
    const fondName = useSelector((state: any) => state.mutifonds.fondName);
    // setType(0);
    function getStorgeTypeReport(type: any) { 
        getStorgeTypeReportDtos(type).then((res) => { 
            res.xAxis = (res.xAxis || []);
            // res.xAxis.unshift("0")
            setReportData(res);
        });
    }
    const choseType = (type: any) => {
        setType(type);
        getStorgeTypeReport(type);
    }
    useEffect(() => { getStorgeTypeReport(0) }, [fondName]);


    let option = {
        // title: {
        //     text: 'Stacked Line'
        // },
        tooltip: {
            trigger: 'axis',
            textStyle: {
                fontSize: getFontSize(14), // 设置字体大小为12像素
            },
        },
        // legend: {
        //     // 归档方式两种
        //     data: reportData.legend?.map(item => item || "暂无归档方式"),
        //     icon: "ract", textStyle: {//文字颜色

        //         color: '#F1F1F3',
        //         padding: [0, 3]//文字与图形之间的左右间距
        //         ,
        //         fontSize: 16
        //     },
        //     itemWidth: 34,//图标宽

        // },
        grid: {
            left: '3%',
            right: '4%',
            top: '20%',
            bottom: '0%',
            containLabel: true
        },
        // toolbox: {
        //     itemSize: 20, 
        //     feature: {
        //         myTool: {
        //             show: true,
        //             title: '按照年份展示',
        //             icon: 'path://M945.225143 827.099429V172.617143c0-51.712-43.300571-93.915429-97.133714-93.915429h-672.182858c-53.833143 0-97.133714 42.203429-97.133714 93.915429v678.546286c0 51.712 43.300571 93.988571 97.133714 93.988571h651.190858c65.243429 0 118.125714-52.882286 118.125714-118.125714zM827.099429 1024H175.908571C78.994286 1024 0 946.834286 0 851.236571V172.690286C0 77.092571 78.994286 0 175.908571 0h672.182858C945.005714 0 1024 77.092571 1024 172.617143v654.482286A196.900571 196.900571 0 0 1 827.099429 1024z m-39.424-265.654857c23.625143 0 36.644571 10.678857 38.985142 31.890286l0.438858 7.533714c0 26.258286-13.165714 39.350857-39.424 39.350857H236.324571c-23.625143 0-36.644571-10.605714-38.985142-31.890286l-0.438858-7.460571c0-26.331429 13.165714-39.424 39.424-39.424h551.350858z m-428.982858-585.142857l57.344 10.532571c-5.851429 19.894857-11.702857 38.034286-18.724571 55.588572h355.766857v53.833142H573.44v80.749715h159.158857v52.077714H573.44v113.517714h197.778286v54.418286H573.44v126.390857h-55.588571V593.92H252.196571v-54.418286h91.867429V373.906286H517.851429V293.156571H370.395429a361.179429 361.179429 0 0 1-91.867429 102.985143l-37.449143-46.811428c58.514286-43.885714 97.718857-102.4 117.613714-176.128zM517.851429 425.984H400.237714v113.517714H517.851429V425.984z',
        //             onclick: function () {

        //                 setType(0);
        //                 getStorgeTypeReport(0);
        //             },

        //         },
        //         myTool1: {
        //             show: true,
        //             title: '按照月份展示',
        //             icon: 'path://M945.225143 827.099429V172.617143c0-51.712-43.300571-93.915429-97.133714-93.915429h-672.182858c-53.833143 0-97.133714 42.203429-97.133714 93.915429v678.546286c0 51.712 43.300571 93.988571 97.133714 93.988571h651.190858c65.243429 0 118.125714-52.882286 118.125714-118.125714zM827.099429 1024H175.908571C78.994286 1024 0 946.834286 0 851.236571V172.690286C0 77.092571 78.994286 0 175.908571 0h672.182858C945.005714 0 1024 77.092571 1024 172.617143v654.482286A196.900571 196.900571 0 0 1 827.099429 1024z m-39.424-265.654857c23.625143 0 36.644571 10.678857 38.985142 31.890286l0.438858 7.533714c0 26.258286-13.165714 39.350857-39.424 39.350857H236.324571c-23.625143 0-36.644571-10.605714-38.985142-31.890286l-0.438858-7.460571c0-26.331429 13.165714-39.424 39.424-39.424h551.350858zM702.171429 198.948571v458.166858c0 37.449143-19.309714 56.173714-56.758858 56.173714H570.514286l-15.213715-54.418286c25.746286 1.170286 49.737143 2.340571 71.972572 2.340572 12.288 0 18.724571-8.192 18.724571-23.405715v-102.4h-239.908571c-7.606857 74.898286-29.842286 136.923429-66.706286 186.660572l-42.715428-39.204572c36.864-51.492571 55.588571-117.028571 56.758857-196.608V198.948571H702.171429z m-56.173715 193.097143h-236.982857v91.867429h236.982857V392.045714z m0-139.849143h-236.982857v87.771429h236.982857v-87.771429z',
        //             onclick: function () {

        //                 setType(1);
        //                 getStorgeTypeReport(1);
        //             },

        //         }
        //     }
        // },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#5897C5",
                    width: 1,
                    type: "solid"
                },
            },
            axisLabel: {
                color: '#5897C5',
                fontSize: getFontSize(14),
            },
            //   月份或年份
            data: reportData.xAxis
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            name: '件数',
            nameTextStyle: {
                color: "#eee",
                fontSize: getFontSize(12), 
            },
            // name: '数量/件',
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#5897C5",
                    width: 1,
                    type: "solid",
                },
            },
            axisLabel: {
                fontSize: getFontSize(14), 
              },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "#2D4873",
                    type: 'dashed',
                }
            }

        },
        series: (reportData?.data || [])?.map(item => {
            let dataY = (item.data || []).map(a => a.number);
            // dataY.unshift(0);
            return {
                name: item.name || '暂无归档方式',
                type: 'line',
                // smooth: true,
                symbol: 'circle',//将小圆点改成实心 不写symbol默认空心
                symbolSize: 5,    //小圆点的大小
                lineStyle: {      // 阴影部分
                    color: 'rgba(255,209,92,0.2)',
                },
                // stack: 'Total',
                data: dataY,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 255, 255,0.8)',
                                // 0% 处的颜色
                            },
                            {
                                offset: 0.25,
                                color: 'rgba(0, 255, 255,0.7)',
                                // 0% 处的颜色
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(0, 255, 255,0.6)',
                                // 0% 处的颜色
                            },
                            {
                                offset: 0.75,
                                color: 'rgba(0, 255, 255,0.4)',
                                // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 255, 255,0.2)',
                                // 100% 处的颜色
                            },
                            // {
                            //     offset: 1, color: 'rgba(255,209,92,0.05)' // 0% 处的颜色
                            // },
                            // {
                            //     offset: 0, color: 'rgba(255,209,92,0.8)' // 100% 处的颜色
                            // }
                        ],
                        global: false // 缺省为 false
                    }
                }

            }
        })

    };


    const chartRef = useEchartsResize(option, [reportData, type])

    // useEffect(() => {
    //     let chart: any = null;
    //     if (chartRef.current) {
    //         // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
    //         chart = echarts.init(chartRef.current);
    //         // 设置图表实例的配置项和数据
    //         option && chart.setOption(option);
    //     }
    //     return () => {

    //         //  销毁实例。实例销毁后无法再被使用
    //         chart.dispose();
    //     };
    // }, [reportData, type]);


    return (
        <EdrmsStorageTypeStyled>
            <div>
                <div className='map-box' >
                    <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
                    <div className='map-box-tool'>
                        <div className={type == 1 ? 'tool-name active' : ' tool-name '} onClick={() => { choseType(1) }}> 月</div>
                        <div className={type == 0 ? 'tool-name active' : ' tool-name '} onClick={() => { choseType(0) }}>年</div>
                    </div>
                </div>
            </div>

        </EdrmsStorageTypeStyled>
    );
};

export default EdrmsStorageType;
